<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        混入分为   局部和全局  经典格式 mixins:[myMixin]
        全局混入：Vue.mixin(xxx)​ 局部混入：mixins:['xxx']

        使用1:
                const Modal = {
                    template: '#modal',
                        data() {
                            return {
                                isShowing: false
                            }
                        },
                        methods: {
                            toggleShow() {
                                this.isShowing = !this.isShowing;
                        }
                    }
                }

                const Tooltip = {
                    template: '#tooltip',
                        data() {
                            return {
                                isShowing: false
                        }
                    },
                    methods: {
                        toggleShow() {
                            this.isShowing = !this.isShowing;
                            }
                        }
                    }

                    这两处代码有相同的地方，两个组件在⽤上，只需要引⼊ mixin

                    编写mixin
                        const toggle = {
                            data() {
                                return {
                                    isShowing: false
                                }
                            },
                            methods: {
                                toggleShow() {
                                    this.isShowing = !this.isShowing;
                                }
                            }
                        }

                        上面的两个文件就变成
                        const Modal = {
                            template:'#modal',
                            mixins: [toggle]
                        }
                        const Modal = {
                            template:'#tooltip',
                            mixins: [toggle]
                        }

        使用2: 还是局部
            export const myMixin = {// 假如这是在mixin.js文件里面
                data(){
                    return {
                        message: 'mixin message',
                        foo: 'bar'
                    }
                },
                created() {
                    console.log('mixin created hook called')
                },
                methods: {
                    hello() {
                        console.log('hello from mixin!')
                    },
                    foo() {
                        console.log('foo method from mixin')
                    }
            }

            import { myMixin } from './mixin.js'
            export default {
                name:'MyComponent',
                mixins:[myMixin],
                created(){
                    this.hello(), // 可以直接调用mixin中的方法
                    console.log(this.message) 可以直接访问mixin中的数据
                }
            }



            全局混入:
                在main.js里面 引入
                import {hunhe,hunhe2} from './mixin'
                Vue.mixin(hunhe)
                Vue.mixin(hunhe2)

                Vue.mixin 的工作原理基于 Vue 的选项合并策略。当你定义一个混入对象并通过 Vue.mixin() 注册后，
                这个混入对象会被合并到每一个组件的选项中。Vue 内部有一套规则来决定如何合并不同类型的选项：
    -->
</body>
</html>